<template>
	<view class="container crashier">
		<myhead :title="mytitle" class="myhead"></myhead>
		<view class="main">
			<navigator class="usertop" url="../selectuser/selectuser">
				<view class="username">
					客户：临时客户
				</view>
				<image src="../../static/images/blackright.png" class="myicon routericon"></image>
			</navigator>
			<view class="info">
				<view class="usertop">
					<view class="username">
						<text>应收</text>
						<text style="color: #DD524D;">0</text>
					</view>
					<view class="count">				
						<text>元</text>
					</view>
					
				</view>
				
				<view class="usertop save">
					<view class="username" @tap = "chooseinput(0)" :class="{active:inputtype == 0}">
						<view class="youhui">
							<view class="youhuibox less">
								优惠
							</view>
							<view class="youhuibox more">
								多收
							</view>
						</view>
						<view>{{less}}</view>
					</view>
					<view class="count">				
						<text>元</text>
					</view>
					
				</view>
				
				<view class="usertop save">
					<view class="username" @tap = "chooseinput(1)" :class="{active:inputtype == 1}">
						<view class="youhui">
							实收
						</view>
						<view>{{shishou}}</view>
					</view>
					<view class="count">				
						<text>元</text>
					</view>
					
				</view>
			</view>
		</view>
		<keyboard @keyboardevent = "keyboardevent"></keyboard>
	</view>
</template>

<script>
	import myhead from "../../components/header/header.vue"
	import keyboard from "../../components/mykeyboard/mykeyboard.vue"
	export default {
		data() {
			return {
				mytitle:'收银台',
				inputtype:0,
				less:'0',
				shishou:'0'
			};
		},
		methods:{
			chooseinput(value){
				this.inputtype = value;
			},
			keyboardevent(value){
				if(this.inputtype == 0){
					if(this.less == '0'){
						this.less = '';
					}
					
					if(value == '.' && this.less.indexOf('.') != -1){
						return
					}
					if(value == 'clear'){
						this.less = this.less.slice(0,this.less.length -1)
						if(this.less == ''){
							this.less = '0';
						}
						return
					}
					if(value == 'ac'){
						this.less = '0';
						return
					}
					this.less += value
				}
				else if(this.inputtype == 1){
					if(this.shishou == '0'){
						this.shishou = '';
					}
					if(value == '.' && this.shishou.indexOf('.') != -1){
						return
					}
					if(value == 'clear'){
						this.shishou = this.shishou.slice(0,this.shishou.length -1)
						if(this.shishou == ''){
							this.shishou = '0';
						}
						return
					}
					if(value == 'ac'){
						this.shishou = '0';
						return
					}
					this.shishou += value
				}
			}
		},
		components:{
			myhead,
			keyboard
		}
	}
</script>

<style lang="scss">
.crashier{
	color: black;
	display: flex;
	flex-direction: column;
	.usertop{
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 16rpx;
		background-color: #FFFFFF;
		margin-bottom: 15rpx;
		.username{
			padding: 20rpx;
			font-weight: bold;
			font-size: 34rpx;
		}
		.myicon{
			padding: 20rpx;
		}
	}
	.main{
		background-color: #eeeeee;
		flex: 1;
		width: 100%;
		padding: 10rpx;
		box-sizing: border-box;
		.info{
			background-color: #FFFFFF;
			border-radius: 16rpx;
			padding: 10rpx ;
			.usertop{
				margin-bottom: 0;
				.username{
					flex:1;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-right: 10rpx;
					padding: 20rpx 10rpx;
					padding-right: 20rpx;
				}
				.count{
					padding: 20rpx;
					font-weight: bold;
					font-size: 34rpx;
				}
				&.save{
					margin-bottom: 10rpx;
					.username{
						border-radius: 16rpx;
						border: 2rpx solid #eeeeee;;
						background-color: #eeeeee;
						&.active{
							border-color: #4CD964;
						}
						.youhui{
							display: flex;
							align-items: center;
							.youhuibox{
								font-size: 24rpx;
								padding: 0rpx 20rpx;
								line-height: 40rpx;
								border: 2rpx solid #4CD964;
								border-radius: 16rpx;
								margin-right: 20rpx;
								background-color: #FFFFFF;
								box-sizing: border-box;
							}
						}
					}
				}
			}
		}	
	}
	

}
</style>
